<template>
    <div>
        <div class="width-75 tc">
            <div class="z-header">
                <div @click="$router.back(-1)" class="lt">
                    <i class="iconfont icon-zuo m-t-18 fs-32"></i>
                </div>
                <div class="fs-32 c-3">
                    商品宝贝
                </div>
            </div>
        </div>
        <div class="index-blank">
        </div>
        <div class="width-75">
            <div class="row m-t-28">
                <div>
                    <img :src="content.goods.images[0]" alt="" class="buy-img">
                </div>
                <div class="m-l-25">
                    <h3 class="m-t-4">{{content.goods.caption}}</h3>
                    <div class="row m-t-4">
                        <h3 class="c-f3">￥
                            <span class="">{{content.goods.price}}</span>
                        </h3>
                        <p class="m-l-5">
                            快递 : ￥
                            <span>{{content.goods.mailPrice}}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="index-blank m-t-28">

        </div>
        <!--siteId == "" 的时候显示-->
        <div class="width-75" @click="isShow()" v-if="siteId == ''">
            <div class="p-tb-45 flex">
                <p>点击选择地址:</p>
                <p>
                    <i class="iconfont icon-you1 fs-24"></i>
                </p>
            </div>
        </div>

        <!--如果an不为空的话  显示-->
        <div class="p-tb-28" v-if="an != ''">
            <div class="width-75" @click="isShow()">

                <div class="flex">
                    <p>
                        <span>收货人:</span>
                        <span>{{an.receivingName}}</span>
                    </p>
                    <p>
                        {{an.receivingPhone}}
                    </p>
                </div>
                <p class="m-t-28">
                    <span>取货地址:</span>
                    <span>{{an.receivingRemarks}}{{an.receiving}}</span>
                </p>

            </div>
        </div>

        <div class="index-blank m-t-28">
        </div>
        <div class="width-75">
            <div class="p-tb-45 row">
                <p class="m-t-4">添加地址</p>
                <p>
                    <!--addSite-->
                    <router-link to="/addSite">
                        <img src="../../img/add.jpg" alt="" class="m-l-5">
                    </router-link>
                </p>
            </div>
        </div>
        <div class="index-blank"></div>
        <div class="buy-payment w">
            <div class="flex">
                <div class="m-l-25 m-t-18">
                    实付款:
                    <span class="c-f3">￥{{money}}</span>
                </div>
                <div>
                    <button class="buy-button b-c2 c-f" @click="buy">确定</button>
                </div>
            </div>
        </div>
        <nav class="modal" v-if="isSite">
            <ul class="buy-pa">
                <li class="tr m-r-8 m-t-28">
                    <i class="iconfont icon-cha" @click="isShow()"></i>
                </li>
                <li v-for="list in site">
                    <div class="p-tb-28 bb-1-e">
                        <div class="row width-75">
                            <div class="buy-w-5" @click="acquireSite(list.receivingAddressId) , isShow() , anSite()">
                                <div class="flex">
                                    <p>
                                        <span>收货人:</span>
                                        <span>{{list.receivingName}}</span>
                                    </p>
                                    <p>
                                        {{list.receivingPhone}}
                                    </p>
                                </div>
                                <p class="m-t-28">
                                    <span>取货地址:</span>
                                    <span>{{list.receivingRemarks}}{{list.receiving}}</span>
                                </p>
                            </div>
                            <div class="m-l-5">
                                <router-link :to="{path:'/addSite',query:{siteId:list.receivingAddressId}}">
                                    |编辑
                                </router-link>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
</template>
 <script>
import vm from "../../assets/js/event";
import { z } from '../../assets/js/common'
export default {
    data() {
        return {
            goodsId: this.$route.query.id, //id
            content: [],  //商品的详情
            site: "",           //全部地址
            isSite: false,    //全部地址是否显示
            siteId: "",   //地址ID
            an: "",  //siteID 保存的地址ID的详情信息
            money:""  //要付的所有的钱
        }
    },
    methods: {
        details() {
            var params = new URLSearchParams();
            params.append("goodsId", this.goodsId);
            this.$http({
                method: "post",
                url: localPath + "/goods/selectGoodsById",
                data: params
            }).then((data) => {
                var arr = data.data.message;
                arr.goods.images = arr.goods.images.split(",");
                this.content = arr;
                this.money = this.content.goods.price+ this.content.goods.mailPrice;
                console.log(this.content);
                console.log(this.money);
            }).catch((error) => {
                console.log(error);
            })
        },
        select() {
            this.$http({
                method: "post",
                url: localPath + "/goods/selectMyReceivingAddress"
            }).then((data) => {
                this.site = data.data.message;
                console.log(this.site);
            }).catch((error) => {
                console.log(error);
            })
        },
        isShow() {
            this.isSite = !this.isSite;
        },
        // 从所有地址中获取地址ID
        acquireSite(src) {
            this.siteId = src;
        },
        // 查询this.siteId 里面保存的收货地址并且显示在页面上
        anSite() {
            var params = new URLSearchParams();
            params.append("receivingAddressId", this.siteId);
            this.$http({
                method: "post",
                url: localPath + "/goods/selectOneReceivingAddress",
                data: params
            }).then((data) => {
                this.an = data.data.message;
            }).catch((error) => {
                console.log(error);
            })
        },
        buy(){
             var params = new URLSearchParams();
            params.append("goodsId", this.goodsId);
             params.append("receivingAddress.receivingAddressId", this.siteId);
            this.$http({
                method: "post",
                url: localPath + "/goods/addGoodsOrder",
                data: params
            }).then((data) => {
                console.log(data);
               
            }).catch((error) => {
                console.log(error);
            })
        }

    },
    mounted() {
        this.details();
        this.select();
         document.addEventListener(z());
    }
}
</script>
 
 <style>
.buy-img {
    width: 2rem;
    height: 2rem;
}

.w-1 {
    width: 1rem;
}

.buy-pa {
    position: absolute;
    border-top: solid 2px #eeeeee;
    bottom: 0rem;
    background: #ffffff
}

.buy-w-5 {
    width: 5.8rem;
}

.buy-payment {
    position: absolute;
    bottom: 0px;
    border-top: solid 2px #eeeeee;
}
.buy-button{
    padding: .15rem .7rem;
}

</style>
 